import { Card, Radio } from 'antd';
import { useState } from 'react';
import BubblesChart from './decisionBubblesChart';
type PropField = {
  title: string;
  data: API.RelationData[];
  height: number;
};
const YwtxFx: React.FC<PropField> = (props) => {
  const [valType, setValType] = useState(1);
  const height = props.height - 60;
  return (
    <Card
      size="small"
      title={props.title}
      extra={
        <Radio.Group
          value={valType}
          size="small"
          onChange={(e) => setValType(Number(e.target.value))}
        >
          <Radio.Button key={1} value={1}>
            整体
          </Radio.Button>
          <Radio.Button key={2} value={2}>
            绩效
          </Radio.Button>
          <Radio.Button key={3} value={3}>
            费用
          </Radio.Button>
        </Radio.Group>
      }
      bodyStyle={{ height: height, padding: '0px' }}
    >
      <BubblesChart data={props.data} valType={valType} height={height} />
    </Card>
  );
};
export default YwtxFx;
